<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="">
    <meta http-equiv="x-dns-prefetch-control" content="on">
    <style>
        .set_top {
            position: absolute;
            left: 30%;
            opacity: 0;
            top: 30%;
        }
    </style>

    <title>已就位-完成卸货</title>
    <link href="../../css/css.css" rel="stylesheet" type="text/css">
    <script src="../../js/jquery-v1.11.2.min.js"></script>
    <script src="../../js/driver.js"></script>
    <script src="../../js/common.js"></script>
    <script src="../../js/ajaxfileupload.js"></script>
</head>
<body>
<section class="itemgroup mt10 p15">
    <div class="oneitem_xl" id="endAddr">
        <i class="iconfont mr5 red icon28">&#xe70c;</i>

    </div>
    <div class="oneitem_xl">
        <label class="gray mr5">联系人:</label>
        <span id="consignName"></span>
        <i class="iconfont rightsmallicon">&#xe6db;</i>
        <label class="right" id="consignMobile"></label>
    </div>
</section>
<section class="p15 subtitle_xl mt10">等待时长</section>
<section class="itemgroup">
    <div class="wait_time">
        <div class="timeFix">
            <div class="daojishi">
                <span class="timeh"></span>:
                <span class="timem"></span>:
                <span class="times"></span>
            </div>
        </div>
    </div>
</section>
<section class="sale_info_xl">实际费用可能因实际行驶里程/等候时间等因素差异</section>
<section class="p15 subtitle_xl mt10">添加装货后照片</section>
<section class="itemgroup p15">
    <div class="add_photo_xl" style="position: relative;" id="add_photo_xl">
        <i class="iconfont">&#xe60d;</i>
    </div>
    <div class="add_photo_info">
        为了保障司机权益及货物安全，避免客户投诉，请点击左侧按钮拍摄货物装车后的照片
        <p>查看示例</p>
    </div>
</section>
<section class="bottomarea">
    <input type="hidden" name="waybillId" id="waybillId">
    <input type="hidden" name="driverUserId" id="driverUserId">
    <input type="hidden" name="pictureId" id="pictureId">
    <input type="hidden" name="billAttachId" id="billAttachId">
    <button type="button" class="btn bottomonebtn_xl" id="okBid">完成卸货</button>
</section>
<script type="text/javascript">
    $(function () {
        //token验证
        checkDriverToken();
    });
    var arriveDate = 0;
    $(document).ready(function () {
        var waybillId = GetArgsFromHref("waybillId");
        var url = _global.serverHost + "/driver/goon_bid5.htm";
        var data = {waybillId: waybillId,driverUuid: getCookie("driverUuid")};
        _callAjaxRequest(url, data, startBidBack);
        $("#waybillId").val(waybillId);


        function startBidBack(data) {
            $("#endAddr").html('<i class="iconfont mr5 red icon28">&#xe70c;</i>' + data.waybill.endAddr);
            $("#consignName").html(data.waybill.consignName);
            $("#consignMobile").html(data.waybill.consignMobile);
            $("#driverUserId").html(data.driverUserId);
            $("#pictureId").html(data.waybill.pictureId);
            $("#billAttachId").html(data.billAttach != null ? data.billAttach.billAttachId : "");
            $("#realPath").html(data.realPath);
            arriveDate = data.waybill.arriveDate;

            var add_photo_xl = "";
            add_photo_xl = '<div class="delphoto" style="top:-45px"';
            if (data.billAttach == null || data.billAttach.savePath == null) add_photo_xl = add_photo_xl + "hidden";
            add_photo_xl = add_photo_xl + ' id="unloadImageDelDiv" onclick="deleteImage(\'unloadImage\')"> ' +
                    '<img src="../../img/del_btn.png" width="100%" height="100%"/>' +
                    '</div>' +
                    '<div id="unloadImageOtherReal" ';
            if (data.billAttach != null && data.billAttach.savePath != null) add_photo_xl = add_photo_xl + "hidden";
            add_photo_xl = add_photo_xl + ' ><input type="file" onchange="loadHead(\'unloadImage\');" id="unloadImage"' +
                    'name="unloadImage" class="set_top"/>' +
                    '<i class="iconfont">&#xe60d;</i>' +
                    '</div>';
            var imgUrl = "";
            if (data.billAttach == null || data.billAttach.savePath == null)
                imgUrl = "#";
            else
                imgUrl = data.realPath + data.billAttach.savePath;
            add_photo_xl = add_photo_xl + '<img src="' + imgUrl + '" width="100%" height="100%" ';
            if (data.billAttach == null || data.billAttach.savePath == null) add_photo_xl = add_photo_xl + "hidden";
            add_photo_xl = add_photo_xl + '  id="unloadImageReal"/>';
            $("#add_photo_xl").html(add_photo_xl);
        }

        $("#okBid").attr("onclick", "okBid('" + waybillId + "')");

    });
    function okBid(waybillId) {
        var url = _global.serverHost + "/driver/check_goon_bid5.htm";
        var data = {waybillId: waybillId,driverUuid: getCookie("driverUuid")};
        _callAjaxRequest(url, data, okBidBack);
    }

    function okBidBack(data) {
        if (data.code == "1") {
            window.location.href = "../start_bid/ok_bid.html?waybillId=" + data.waybillId;
        } else {
            alert(data.message);
        }
    }

    function deleteImage(fileElementId) {
        $.ajax({
            type: "POST",
            url: _global.serverHost + "/driver/deleteImage.htm",
            data: {billAttachId: $("#billAttachId").val()},
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            success: function (data) {
                if (data.code == "1") {
                    $("#" + fileElementId + "Real").attr("src", "#");
                    $("#" + fileElementId + "OtherReal").show();
                    $("#" + fileElementId + "Real").hide();
                    $("#" + fileElementId + "DelDiv").hide();
                    $("#pictureId").val("");
                    $("#billAttachId").val("");
                } else {
                    alert(data.message);
                }
            }
        })
        ;
    }

    function loadHead(fileElementId) {
    	var fileGuid=guid();
    	var frameId=new Date().getTime();//"jUploadFrame"+frameId
        $.ajaxFileUpload({
            url: _global.serverHost + "/driver/uploadVehicle.htm?driverUserId=" + $("#driverUserId").val() + "&billId=" + $("#waybillId").val() + "&pictureId=" + $("#pictureId").val() + "&fileElementId=" + fileElementId+ "&driverUuid=" + getCookie("driverUuid")+"&guid="+fileGuid,
            secureuri: false,
            fileElementId: fileElementId,//文件选择框的id属性
            dataType: 'json',   //json
            id:frameId,
            success: function (ajaxfileuploaddata) {
            	$.ajax({
                    type: "POST",
                    url: _global.serverHost + "/driver/getImageByGuid.htm",
                    data: {guid: fileGuid,driverUuid: getCookie("driverUuid")},
                    contentType: "application/x-www-form-urlencoded;charset=UTF-8",
                    success: function (data) {
                    	$("#" + fileElementId + "Real").attr("src", data.fileUrl);
                        $("#" + fileElementId + "OtherReal").hide();
                        $("#" + fileElementId + "Real").show();
                        $("#" + fileElementId + "DelDiv").show();
                        $("#pictureId").val(data.pictureId);
                        $("#billAttachId").val(data.billAttachId);
                    }
                });
            }, 
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            	console.log("====ajax上传文件失败！");
                alert('上传失败！');
            }
        });
    }

    setInterval(lxfEndtime, 60);
    //倒计时
    function lxfEndtime() {
        $(".daojishi").each(function () {
            //var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量
            var endtime = new Date(arriveDate).getTime();//取结束日期(毫秒值)
            var nowtime = new Date().getTime();  //今天的日期(毫秒值)
            var youtime = nowtime - endtime;//还有多久(毫秒值)
            var seconds = youtime / 1000;//秒
            var minutes = Math.floor(seconds / 60);//分
            var hours = Math.floor(minutes / 60);//小时
            var days = Math.floor(hours / 24);//天
            var CDay = days;
            var CHour = hours % 24;
            var CMinute = minutes % 60;
            var CSecond = Math.floor(seconds % 60);//"%"是取余运算，可以理解为60进一后取余数，然后只要余数。
            var c = new Date();
            if (CSecond < 10) {//如果秒数为单数，则前面补零
                CSecond = "0" + CSecond;
            }
            if (CMinute < 10) { //如果分钟数为单数，则前面补零
                CMinute = "0" + CMinute;
            }
            if (CHour < 10) {//如果小时数为单数，则前面补零
                CHour = "0" + CHour;
            }
            $(this).html("<span class='timeh'>" + CHour + "</span>:<span class='timem'>" + CMinute + "</span>:<span class='times'>" + CSecond + "</span>");
        });
    }
</script>
</body>
</html>